<template>
  <div class="app-container">
    <el-row class="group_css" v-for="item in form.groupList" :key="item.groupName">
      <el-col :span="14" class="group_title">{{ selectDictLabels(dict.type.cld_project_groups, item.groupName)
        }}</el-col>
      <el-col :span="10" class="group_number">
        <div>
          <span >库存数量：{{ item.stockNumber }}</span>
          <span style="margin-left: 50px;">库存金额：{{ toMoney(item.stockMoney) }}</span>
          <span style="margin-left: 50px;">消耗量：{{ item.consumeNumber }}</span>
          <span style="margin-left: 50px;">消耗金额：{{ toMoney(item.consumeMoney) }}</span>
        </div>
      </el-col>
      <el-table v-loading="loading" :data="item.list" border>
        <el-table-column label="岗位编号" align="center" prop="projectPostNo" />
        <el-table-column label="岗位名称" align="center" prop="projectPostName">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.cld_project_post" :value="scope.row.projectPostName" />
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" prop="staffName" />
        <el-table-column label="库存数量" align="center" prop="stockNumber">
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.stockNumber > 0"><el-link type="primary" @click="handleViewDetails(scope.row, 1)">{{
              scope.row.stockNumber }}</el-link></span> -->
              {{scope.row.stockNumber}}
          </template>
        </el-table-column>
        <el-table-column label="库存金额" align="center" prop="stockAmount">
          <template slot-scope="scope">
            <span>{{ toMoney(!scope.row.stockAmount ? 0 : scope.row.stockAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="消耗数量" align="center" prop="consumeNumber">
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.consumeNumber > 0"><el-link type="primary" @click="handleViewDetails(scope.row, 2)">{{
              scope.row.consumeNumber }}</el-link></span> -->
              {{scope.row.consumeNumber}}
          </template>
        </el-table-column>

        <el-table-column label="消耗总额" align="center" prop="consumeMoney">
          <template slot-scope="scope">
            <span>{{ toMoney(!scope.row.consumeMoney ? 0 : scope.row.consumeMoney) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { listTeamMemberDetails, selectGroupConsumeList } from "@/api/cld/projectRepository";
export default {
  name: "teamMemberDetails",
  dicts: ['cld_project_groups', 'cld_project_post'],
  props: {
    projectId: {
      type: Number
    }
  },
  data() {
    return {
      form: {
        teamMemberList: []
      },
      detailsTitle: '',
      detailsOpen: false,
      detailsTotal: 0,
      detailsList: [],
      activeName: '1',
      currRow: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查看项目仓库 */
    getList() {
      let params = {}
      params.projectId = this.projectId
      listTeamMemberDetails(params).then(response => {
        this.form = response.data;
        this.form.groupList.forEach(item => {
          item.stockNumber = 0;
          item.stockMoney = 0;
          item.consumeNumber = 0;
          item.consumeMoney = 0;
          item.list.forEach(i => {
            item.stockNumber += i.stockNumber;
            item.stockMoney += i.stockAmount;
            item.consumeNumber += i.consumeNumber;
            item.consumeMoney += (i.consumeMoney ? parseFloat(i.consumeMoney) : 0);
          })
        })
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
<style scoped>
.el-select {
  width: 100%;
}

.title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: left;
  color: black;
}

.group_css {
  background: #9093991c;
  margin-bottom: 20px;
}

.group_title {
  font-size: 18px;
  padding: 10px;
  font-weight: 600;
}

.group_number {
  text-align: right;
  padding: 10px;
  padding-right: 50px;
  font-size: 18px;
}
</style>
